<template>
  <view class="container">
    <view class="content">
      <view class="content-tab d-rn d-ac d-ja">
        <view
          class="content-tab-one d-cw d-ac d-jc"
          v-for="(item, index) in 3"
          :key="index"
          @click="handleNav(index)"
        >
          <text :class="navSts == index ? 'active' : 'outactive'">{{
            !index ? $t('all') : index == 1 ? $t('unread') : $t('read')
          }}</text>
          <text v-if="navSts == index"></text>
        </view>
      </view>
      <view class="list">
        <view
          class="list-one d-rn d-ac d-jb"
          v-for="(item, index) in list"
          :key="index"
          @click="handleGoDetails(item)"
        >
          <view class="list-one-left">
            <view class="list-one-left-top d-rn d-ac">
              <text
                class="text"
                :class="!item.isRead ? 'active' : 'outactive'"
              ></text>
              <text class="one-txt-cut aa">{{ item.content }}</text>
            </view>
            <view class="list-one-left-bto">
              <text>{{item.createTime}}</text>
            </view>
          </view>
          <view class="list-one-right">
            <image src="../../static/img/bottom.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var _self;
import { getMessage } from "../../api/index.js";
export default {
  data() {
    return {
      navSts: 0,
      pageNum: 1,
      pageSize: 10,
      list: [],
      total: 0,
      isRead: "",
    };
  },
  onShow() {
    _self = this;
    // _self.getinformationList()
    _self.getgetMessage();
  },
  methods: {
    getgetMessage() {
      getMessage({
        isRead: this.isRead,
      }).then((res) => {
        if (res.code == 200) {
          this.list = res.data.records;
        }
      });
    },
    handleNav(index) {
      console.log(index);
      if (!index) {
        this.isRead = "";
      } else if (index == 1) {
        this.isRead = 0;
      } else {
        this.isRead = 1;
      }
      _self.getgetMessage();
      _self.navSts = index;
    },
    handleGoDetails(item) {
      _self.$commonFun.goUrl(1, "../messagedetail/index", { id: item.id });
    },
    // getinformationList(){
    // 	informationList({
    // 		pageNum:_self.pageNum,
    // 		pageSize:_self.pageSize
    // 	}).then(res=>{
    // 		if(res.code == 200){
    // 			// _self.list = res.rows
    // 			// _self.total = res.total
    // 		}
    // 	})
    // },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
.container {
  width: 100%;
  .content {
    &-tab {
      padding: 24rpx 0;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1px solid #f5f5f5;
      background-color: #fff;
      text:nth-of-type(1) {
        font-size: 30rpx;
      }
      text:nth-of-type(2) {
        width: 138rpx;
        height: 4rpx;
        background-color: #fdb911;
        position: absolute;
        top: 93%;
      }
      .active {
        color: #333333;
        font-weight: 500;
      }
      .outactive {
        color: #999999;
      }
    }
    .list {
      width: 100%;
      background-color: #fff;
      margin-top: 20rpx;
      &-one {
        padding: 24rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        &-left {
          &-top {
            .text {
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
            }
            .aa {
              max-width: 540rpx;
              margin-left: 20rpx;
              font-size: 30rpx;
              color: #333333;
            }
            .active {
              background-color: #ff0000;
            }
          }
          &-bto {
            margin-top: 10rpx;
            padding-left: 40rpx;
            box-sizing: border-box;
            text {
              font-size: 24prx;
              color: #999990;
            }
          }
        }
        &-right {
          image {
            width: 28rpx;
            height: 16rpx;
            transform: rotate(-90deg);
          }
        }
      }
    }
  }
}
</style>
